<template>
  <div>
    <div>【大区数据信息】</div>
    <div ref="target" class=" w-full h-full"></div>
  </div>
</template>

<script setup>
import {defineProps,ref,onMounted,watch} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  data:{
    type:Object,
    required:true
  }
})
// console.log("props.data=>",props.data);
const target = ref(null)
let myChart = null
onMounted(()=>{
  myChart = echarts.init(target.value)
  renderChart()
})
watch(()=>props.data,()=>{
  renderChart()
})
const renderChart = () => {
  const options = {
    // x轴
    xAxis:{
      show:false,
      type:"value",
      max:function(value){
        return parseInt(value.max * 1.2)
      }
    },
    // y轴
    yAxis:{
      type:'category',
      data:props.data.regions.map(item=>item.name),
      inverse:true,
      axisLine:{
        show:false
      },
      // 
      axisTick:{
        show:false
      },
      // 字段颜色
      axisLabel:{
        color:'#9eb1c8'
      },
    },
    // 绘制图表位置
    grid:{
      top:0,
      right:0,
      bottom:0,
      left:0,
      containLabel:true
    },
    // 核心配置
    series:[{
      type:'bar',
      data:props.data.regions.map(item=>{
        return{
        name:item.name,
        value:item.value
      }
      }),
      showBackground:true,
      backgroundStyle:{
        color:'rgba(180,180,180,0.2)'
      },
      itemStyle:{
        color:'#5D98CE',
        barBorderRadius:5,
        shadowColor:"rgba(0,0,0,0.3)",
        shadowBlur:5
      },
      barWidth:12,
      label:{
        show:true,
        position:'right',
        textStyle:{
          color:'#fff'
        }
      }
    }]
  }
  myChart.setOption(options)
}

</script>

<style lang="scss" scoped>

</style>